<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-2.0.3.js"></script>
    <link rel="stylesheet" href="css/手机详情.css">
</head>
<style>

</style>
<body>
<div id="meizu-header-container">
    <div class="meizu-header">
        <div class="meizu-header-warp">
            <div class="meizu-header-logo">
                <a href=""><img src="imgs/1.png" alt=""></a>
            </div>
            <div class="meizu-header-user">
                <a href=""><img src="imgs/2.png" alt=""></a>
                <span class="glyphicon glyphicon-menu-down"></span>
            </div>
            <ul class="meizu-header-link">
                <li>魅族商城</li>
                <li class="c1">魅族手机</li>
                <li class="c1">魅蓝手机</li>
                <li class="c1">智能硬件</li>
                <li class="c1"style="width: 72px;">配件</li>
                <li style="width: 72px;">服务</li>
                <li style="width: 86px;">专卖店</li>
                <li style="width: 83px;">Flyme</li>
                <li style="width: 72px;">社区</li>
            </ul>
        </div>
    </div>
    <div id="meizu-header-sub-mx" class="mei-header-sub meizu-header-sub-animation meizu-header-sub-show">
        <div class="meizu-header-sub-warp" style="z-index: 5">
            <ul class="meizu-header-sub-ul-on">

            </ul>
            <ul class="meizu-header-sub-ul-on">
                <li><a href=""><img src="http://www3.res.meizu.com/static/cn/widget/header/images/mx6_23066fc.png" alt="">MX6</a></li>
                <li><a href=""><img src="http://www3.res.meizu.com/static/cn/widget/header/images/pro6_5f39455.png" alt="">PRO 6</a></li>
                <li><a href=""><img src="http://www3.res.meizu.com/static/cn/widget/header/images/pro5_e0970c9.png" alt="">PRO 5</a></li>
                <li><a href=""><img src="http://www3.res.meizu.com/static/cn/widget/header/images/mx5_d0aca4c.png" alt="">MX5</a></li>
            </ul>
            <ul class="meizu-header-sub-ul-on">
                <li><a href=""><img src="http://www3.res.meizu.com/static/cn/widget/header/images/m3s_7cff047.png" alt="">魅蓝 3s</a></li>
                <li><a href=""><img src="http://www3.res.meizu.com/static/cn/widget/header/images/pro6_5f39455.png" alt=""></a>魅蓝 3</li>
                <li><a href=""><img src="http://www3.res.meizu.com/static/cn/widget/header/images/m3note_08eb5e5.png" alt=""></a>魅蓝 note3</li>
                <li><a href=""><img src="http://www3.res.meizu.com/static/cn/widget/header/images/meilanmetal_ffc5a14.png" alt="">魅蓝 metal</a></li>
                <li><a href=""><img src="http://www3.res.meizu.com/static/cn/widget/header/images/m2note_2c82398.png" alt=""></a>魅蓝 note2</li>
            </ul>
            <ul class="meizu-header-sub-ul-on">
                <li><a href=""><img src="http://www3.res.meizu.com/static/cn/widget/header/images/router_s_e2e8faa.png" alt=""></a>路由器极速版</li>
                <li><a href=""><img src="http://www3.res.meizu.com/static/cn/widget/header/images/router_1280efe.png" alt=""></a>路由器</li>
            </ul>
            <ul class="meizu-header-sub-ul-on">
                <li><a href=""><img src="http://www3.res.meizu.com/static/cn/widget/header/images/loopjacket_003383b.png" alt=""></a>智能保护套</li>
                <li><a href=""><img src="http://www3.res.meizu.com/static/cn/widget/header/images/ep51_7b728d8.png" alt=""></a>蓝牙运动耳机</li>
                <li><a href=""><img src="http://www3.res.meizu.com/static/cn/widget/header/images/hd50_0ef1eab.png" alt=""></a>头戴式耳机</li>
            </ul>
        </div>
    </div>
</div>

<div class="meizu-contain">
    <div class="slider-first">
        <div class="widget-subnav">
            <div class="subnav-warp">
                <div class="subnav-logo">
                    <img src="http://www3.res.meizu.com/static/cn/widget/subnav/images/mx6_logo_0b2879a.png" alt="">
                </div>
                <div class="subnav-buy"><a href="" style="color: white;">立刻购买</a></div>
                <div class="subnav-disclosure">
                    <a href=""><span>探索 MX6</span>&nbsp;&nbsp;</a>
                    <a href=""><span class="glyphicon glyphicon-menu-hamburger"></span></a>
                </div>
            </div>
        </div>
        <div class="meizu-header-user-dropdown">
            <ul>
                <li><a href="" >立即登录</a></li>
                <li style="font-size: 12px;color: #999;">没有账号？<a href="" style="color: #3db1fa">立即注册</a></li>
                <li><a href="">我的购物车</a></li>
                <li><a href="">我的订单</a></li>
                <li><a href="">M码通道</a></li>
            </ul>
        </div>
        <ul class="mx6-logo">
            <li class="li1" style="position: absolute;display:none;margin-left: 1100px;margin-top: 350px">MX6</li>
            <li class="li2"  style="position: absolute;display:none;margin-left: 1100px;margin-top: 450px;"><h1 style="font-size: 45px">相由心生，美不自胜</h1></li>
            <li class="li3" style="position: absolute;display:none;margin-left: 1110px;margin-top: 550px;font-size: 16px;font-weight: 800"><p>精致的金属一体机身3D珊瑚礁纳米注塑结构更让天线区域<br>与金属区域紧密结合</p></li>
        </ul>
    </div>
    <div class="slder-second" style="position: relative;float: left;">
        <div class="slider-second-first">
            <ul class="slider-second">
                <li class="li-2-1" style="position:absolute;display:none;margin-top:300px;margin-left: -7px;font-size: 42px">更薄，更滑，更快</li>
                <li class="li-2-2" style='position:absolute;display:none;margin-top:380px;;font: 16px/1.5 Helvetica,Tahoma,Arial,"Hiragino Sans GB","Microsoft YaHei",SimSun,Heiti,sans-serif;'><p>魅族MX6 凭借高精度显示的 5.5 英寸屏幕，可将屏<p/><p>幕的色彩细节内容生动展示。此次还采用了夏普</p><p>TDDl 屏幕显示触发一体技术，触控灵敏度和触控信</p><p>噪比大幅度提升</p></li>
                <li class="li-2-3" style="position:absolute;display:none;margin-top:560px;margin-left: -12px;font-size: 50px;color: #666666;"><p>1500:1</p></li>
                <li class="li-2-4" style="position:absolute;display:none;margin-top:630px;color: #666666"><p>典型值对比度</p></li>
                <li class="li-2-5" style="position:absolute;display:none;margin-top:670px"><p>____</p></li>
                <li class="li-2-6" style="position:absolute;display:none;margin-top:720px;font-size: 50px;color: #666666;"><p>85%</p></li>
                <li class="li-2-7" style="position:absolute;display:none;margin-top:780px;color: #666666"><p>NTSC 广色域</p></li>
                <li class="li-2-8" style="position:absolute;display:none;margin-top:820px"><p>____</p></li>
                <li class="li-2-9" style="position:absolute;display:none;margin-top:850px;font-size: 50px;color: #666666"><span>500</span>&nbsp<span style="font-size: 20px;color: #666666">cd/m²</span></li>
                <li class="li-2-10  " style="position:absolute;display:none;margin-top:910px;color: #666666;"><p>峰值亮度</p></li>
            </ul>
        </div>
        <div class="slider-second-right">
            <img src="http://www3.res.meizu.com/static/cn/products/mx6/summary/images/screen_a1198b8.jpg" alt="">
        </div>
    </div>
    <div style="clear: both"></div>
    <div class="slider-three" style="position: relative;">
        <div class="slider-three-warp">
            <ul class="slider-three-cpu">
                <li class="li-3-1" style='position:absolute;display:none;;margin-top:500px;font-size: 42px;left: 90px'>大核放心开，流畅有保障</li>
                <li class="li-3-2" style='position:absolute;display:none;;margin-top:600px;font: 16px/1.5 Helvetica,Tahoma,Arial,"Hiragino Sans GB","Microsoft YaHei",SimSun,Heiti,sans-serif;'>这是魅族 MX 系列首次启用 A72 架构十核处理器，使魅族 MX6 的运算处理速度更为畅快顺滑。</li>
                <li class="li-3-3" style='position:absolute;display:none;;margin-top:700px;left: 90px;font-family: "Source Han Sans",Helvetica,Tahoma,Arial,"Hiragino Sans GB","Microsoft YaHei",SimSun,Heiti,sans-serif;'>全系标配 4G 大运存，后台常驻切换多个程序也无比轻松。</li>
            </ul>
        </div>
        <div class="cpu-phone" style="position:absolute;display: none;margin-top: 300px">
            <img src="http://www3.res.meizu.com/static/cn/products/mx6/summary/images/cpu_phone_8fc79d3.png" alt="">
        </div>
        <div class="cpu-items" style="position: absolute;">
            <ul class="cpu-items-warp">
                <li class="li-4-1" style="right: 1100px">
                    <h2 style="font-size: 50px;">
                        2.3<span style="font-size: 20px">GHz</span>
                    </h2>
                    <p>____</p>
                    <p>高主频</p>
                </li>
                <li class="li-4-2" style="right: 850px">
                    <h2 style="font-size: 50px;">
                        4<span>G</span>
                    </h2>
                    <p>____</p>
                    <p>大运存</p>
                </li>
                <li class="li-4-3"style="right: 600px">
                    <h2 style="font-size: 50px;">
                        9<span style="font-size: 20px">小时</span>
                    </h2>
                    <p>____</p>
                    <p>日常运行</p>
                </li>
                <li class="li-4-4" style="right: 380px">
                    <h2 style="font-size: 50px;left: 80px">
                        18<span style="font-size: 14px">天</span>
                    </h2>
                    <p>____</p>
                    <p>纯净待机</p>
                </li>
            </ul>
        </div>
    </div>
    <a href="" class="a1" style="text-decoration: none">
        <div class="meizu-camera">
        <p style="text-align: center;color: #ccc;">继续了解</p>
            <h2 style="text-align: center;    color: #21c4f2;">MX6  . 相机</h2>
        </div>
    </a>
    <div class="page-remark">
        <div class="pager-warp">
            <ul style="display: inline-block">
                <span style="width: 35px; height: 51px;float: left">注：</span>
                <li style="float: left">本网站里所呈现的配图素材、产品型号、测试数据、功能性能、规格参数等仅供参考，魅族有可能对上述内容进行改进，所有的具体信息请参照产品实物、产品说明书。除非经特殊标注说明，本网站中所涉及的任何数据均为魅族实验室内部测试结果。</li>
                <li style="float: left">「普通电池」指代魅族此前使用的方案。</li>
            </ul>
        </div>
    </div>
</div>
<div class="meizu-footer">
    <div class="meizu-footer-warp">
        <div class="meizu-row">
            <div>
                <ul>
                    <li>魅族商城</li>
                    <li>PRO 6</li>
                    <li>魅蓝 3s</li>
                    <li>魅蓝 3</li>
                    <li> 魅蓝 note3</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li> 服务支持</li>
                    <li>寄送快修</li>
                    <li>上门快修</li>
                    <li>预约维修</li>
                    <li>VIP注册</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>FLyme</li>
                    <li>固件下载</li>
                    <li>开放平台</li>
                    <li>软件商店</li>
                    <li>查找手机</li>
                </ul>
            </div>
            <div>
                <ul>
                    <li>关于我们</li>
                    <li>关于魅族</li>
                    <li>加入我们</li>
                    <li>联系我们</li>
                    <li>意见反馈</li>
                </ul>
            </div>
            <div class="online" style="width: 188px;float: right;margin-right: 0">
                <ul>
                    <li class="host24">24小时全国服务热线</li>
                    <li class="phone1">400-788-3333</li>
                    <li class="phone2" style="width: 165px;height:40px;background:#00A7EA;margin: 15px 0 0 20px;line-height: 40px;">
                        <img src="http://www3.res.meizu.com/static/cn/widget/footer/images/icon-phone_d23e91d.png" alt="">24小时在线客服</li>
                </ul>
            </div>
        </div>
        <div style="clear: both"></div>
        <hr class="footer_hr">
        <div class="meizu_footer_co" >
            <div style="float: left">
                <a href="">粤ICP备13003602号-2&nbsp</a>
                <a href=""> 营业执照&nbsp</a>
                <a href=""> 法律声明&nbsp</a>
                <img src="" alt="">
                <span>粤公网安备 44049102496009 号</span>
                <img src="" alt="">
                &nbsp <img src="" alt="">
                &nbsp<img src="" alt="">
                &nbsp&nbsp<span>|</span>
                <span> Select Region </span>
                <img src="" alt="">  <br>
                <span>©2016 Meizu Telecom Equipment Co., Ltd. All rights reserved.</span>
            </div>
            <div style="float: right">
                <span>关注我们&nbsp </span>
                <img src="    " alt="">
                &nbsp <span>|</span>&nbsp
                <img src="" alt="">
                &nbsp<span>|</span>&nbsp
                <img src="" alt="">
            </div>
        </div>
    </div>
    <div class="meizu-footer-toTop">
        <div>
            <img src="" alt="">
        </div>
    </div>
</div>
</body>
</html>
<script>
    $('.c1').each(function(index){
        $(this).mouseover(function(){
            $('.meizu-header').css('background','black').css('transition','0.5s');
            $('.meizu-header-link').css('color','white');
            $('.meizu-header-sub-ul-on').css('display','none').eq($(this).index()).css('display','block');
            $('.meizu-header-sub-warp').slideDown('slow');
        })
        $('.meizu-header-sub-warp').mouseleave(function(){
            $('.meizu-header-sub-warp').slideUp('slow');
            $('.meizu-header').css('background','white').css('transition','0.5s');
            $('.meizu-header-link').css('color','black');
        })
    })
    window.onload=function ()
    {
        var header=document.getElementsByClassName('meizu-header')[0];
        var user=document.getElementsByClassName('meizu-header-user')[0];
        var dropdown=document.getElementsByClassName('meizu-header-user-dropdown')[0];
        var timer=null;

        dropdown.onmouseover=user.onmouseover=function ()
        {
            clearInterval(timer);
            setTimeout(function (){
                dropdown.style.display='block';
            },300);
        };
        dropdown.onmouseout=user.onmouseout=function ()
        {
            clearInterval(timer);
            timer=setTimeout(function (){
                dropdown.style.display='none';
            }, 300);
        };
    };



    $(window).on('scroll',function(){
        if ($(window).scrollTop() > 80){
            $(document).ready(function(){
                timer1 = setInterval(function(){
                    $('.li1').css('display','block');
                    $('.li1').animate({top:20, opacity: 'show'},300);
                    $('.li1').animate({fontSize:'80px'},"slow");
                })
                timer2 = setInterval(function(){
                    $('.li2').css('display','block');
                    $('.li2').animate({top:20, opacity: 'show'},1000);
                },1000)
                timer3 = setInterval(function(){
                    $('.li3').css('display','block');
                    $('.li3').animate({top:20, opacity: 'show'},1500);
                },2000)
                });
        }
    });

    $(window).on('scroll',function(){
        if ($(window).scrollTop() > 320){
            $(document).ready(function(){
                timer4 = setInterval(function(){
                    $('.li-2-1').css('display','block');
                    $('.li-2-1').animate({bottom:753, opacity: 'show'},1000);
                },1000);
                timer5 = setInterval(function(){
                    $('.li-2-2').css('display','block');
                    $('.li-2-2').animate({bottom:600, opacity: 'fast'},1000);
                },1300);
                timer6 = setInterval(function(){
                    $('.li-2-3').css('display','block');
                    $('.li-2-3').animate({bottom:480, opacity: 'fast'},1000);
                },1600);
                timer7 = setInterval(function(){
                    $('.li-2-4').css('display','block');
                    $('.li-2-4').animate({bottom:465, opacity: 'show'},1000);
                },1900);
                timer8 = setInterval(function(){
                    $('.li-2-5').css('display','block');
                    $('.li-2-5').animate({bottom:425, opacity: 'show'},1000);
                },1200);
                timer9 = setInterval(function(){
                    $('.li-2-6').css('display','block');
                    $('.li-2-6').animate({bottom:325, opacity: 'show'},1000);
                },1500)
                timer10 = setInterval(function(){
                    $('.li-2-7').css('display','block');
                    $('.li-2-7').animate({bottom:310, opacity: 'show'},1000);
                },1800);
                timer11 = setInterval(function(){
                    $('.li-2-8').css('display','block');
                    $('.li-2-8').animate({bottom:270, opacity: 'show'},1000);
                },2100);
                timer12 = setInterval(function(){
                    $('.li-2-9').css('display','block');
                    $('.li-2-9').animate({bottom:185, opacity: 'show'},1000);
                },2300);
                timer14 = setInterval(function(){
                    $('.li-2-10').css('display','block');
                    $('.li-2-10').animate({bottom:163, opacity: 'show'},1000);
                },2400);
                timer15 = setInterval(function(){
                    $('.slider-second-right').css('display','block');
                    $('.slider-second-right').animate({bottom:0, opacity: 'show'},1000);
                },2000)
            });
        }
    });


    $(window).on('scroll',function(){
        if ($(window).scrollTop() >1180 ){
            $(document).ready(function(){
                timer16 = setInterval(function(){
                    $('.li-3-1').css('display','block');
                    $('.li-3-1').animate({bottom:-85, opacity: 'show'},1000);
                },1000);
                timer17 = setInterval(function(){
                    $('.li-3-2').css('display','block');
                    $('.li-3-2').animate({bottom:-130, opacity: 'show'},1000);
                },1300);
                timer18 = setInterval(function(){
                    $('.li-3-3').css('display','block');
                    $('.li-3-3').animate({bottom:-150, opacity: 'show'},1000);
                },1600);
                timer19 = setInterval(function(){
                    $('.cpu-phone').css('display','block');
                    $('.cpu-phone').animate({bottom:280, opacity: 'show'},800);
                },2500);
                timer20 = setInterval(function(){
                    $('.li-4-1').css('display','block');
                    $('.li-4-1').animate({bottom:20, opacity: 'show'},1000);
                },2800)
                timer21 = setInterval(function(){
                    $('.li-4-2').css('display','block');
                    $('.li-4-2').animate({bottom:20, opacity: 'show'},1000);
                },3000)
                timer22 = setInterval(function(){
                    $('.li-4-3').css('display','block');
                    $('.li-4-3').animate({bottom:20, opacity: 'show'},1000);
                },3200)
                timer23 = setInterval(function(){
                    $('.li-4-4').css('display','block');
                    $('.li-4-4').animate({bottom:20, opacity: 'show'},1000);
                },3400)
            });
        }
    });
    $(window).on('scroll',function(){
        if ($(window).scrollTop() > 900){
            $('.meizu-footer-toTop').css('display','block');
        }
        else {
            $('.meizu-footer-toTop').css('display','none');
        }
    });
    $('.meizu-footer-toTop').click(function(){
        $(window).scrollTop(0);
    });


</script>